<template>
  <div class="productionCost">
    <div class="searchBar">
      <div class="searchForm">
        <div class="name">店铺名称</div>
        <el-input
          v-model="searchParams.shopName"
          placeholder="请输入店铺名称"
          clearable>
        </el-input>
        <div class="name">商品ID</div>
        <el-input
          v-model="searchParams.productId"
          placeholder="请输入商品ID"
          clearable>
        </el-input>
        <div class="name">商品成本</div>
        <el-input
          v-model="searchParams.productCost"
          placeholder="请输入商品成本"
          clearable>
        </el-input>
        <div class="name">运费</div>
        <el-input
          v-model="searchParams.shippingFee"
          placeholder="请输入运费"
          clearable>
        </el-input>

        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>
<!--      <el-button type="primary" @click="handleExport">导出</el-button>-->
    </div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      height="100%">
      <el-table-column
        label="序号"
        width="60">
        <template slot-scope="scope">
          {{scope.$index + 1 + (searchParams.pageNum - 1) * searchParams.pageSize}}
        </template>
      </el-table-column>
      <el-table-column
        width="120"
        prop="shopName"
        label="店铺名称">
      </el-table-column>
      <el-table-column
        width="160"
        prop="productId"
        label="商品ID">
      </el-table-column>
      <el-table-column
        prop="productSpec"
        label="商品规格">
      </el-table-column>
      <el-table-column
        width="100"
        prop="productCost"
        label="商品成本">
      </el-table-column>
      <el-table-column
        width="100"
        prop="shippingFee"
        label="运费">
      </el-table-column>
      <el-table-column
        width="160"
        label="商品最新成本">
        <template slot-scope="scope">
          <el-input-number
            @change="handleSave(scope.row)"
            @blur="handleSave(scope.row)"
            size="small"
            v-model="scope.row.productLatestCost"
            :precision="2"
            controls-position="right">
          </el-input-number>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageContain">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.pageNum"
        :page-size="searchParams.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getProductCostIncome, updateLastCost } from "@/api/order";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      searchParams: {
        shopName: "",
        productId: "",
        productCost: "",
        shippingFee: "",

        pageSize: 100,
        pageNum: 1,
      },
    }
  },
  created() {
    this.initTable();
  },
  methods: {
    initTable() {
      getProductCostIncome(this.searchParams).then(res => {
        const { total, rows } = res;
        this.tableData = rows;
        this.total = total;
      })
    },
    handleSearch() {
      this.initTable();
    },
    handleSizeChange(v) {
      this.searchParams.pageNum = 1;
      this.searchParams.pageSize = v;
      this.initTable();
    },
    handleCurrentChange(v) {
      this.searchParams.pageNum = v;
      this.initTable();
    },
    handleSave(data) {
      const { id, productId, shopId, productLatestCost } = data;
      updateLastCost({id: id, productLatestCost}).then(res => {
        this.initTable();
      })
    }
  }
}
</script>
<style lang="scss" scoped>
div.searchBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  div.searchForm {
    display: flex;
    justify-content: start;
    align-items: center;
    .el-input, .el-select {
      width: 180px;
    }
    div.name {
      width: 60px;
      margin-right: 5px;
      font-size: 14px;
      &:not(:first-child) {
        margin-left: 14px;
      }
    }
    .el-button {
      margin-left: 14px;
    }
  }
  margin-bottom: 20px;
}
</style>

